import React from "react";
import { Form, Button, Uploader, Input, Checkbox } from "@nutui/nutui-react";
import styles from "./index.module.scss";
import aImage from "../../images/2.jpg";
import bImage from "../../images/3.jpg";
import { history } from '@tarojs/router'
import Taro from "@tarojs/taro";

function Index() {
  const handleClick = () => {
    Taro.navigateTo({
      url: "pages/addInfo/index",
    });
  };

  return (
    <div className={styles.container}>
      <Form
        labelPosition="left"
        footer={
          <>
            <Button nativeType="submit" onClick={handleClick} block type="primary">
              认证
            </Button>
          </>
        }
      >
        <div className={styles.card}>
          <div>身份证信息</div>
          <div className="flex">
            <Form.Item label="" name="files">
              <Uploader
                capture
                url="https://my-json-server.typicode.com/linrufeng/demo/posts"
              >
                <img width='100%' src={aImage} alt="" srcset="" />
              </Uploader>
            </Form.Item>
            <Form.Item label="" name="files">
              <Uploader
                capture
                url="https://my-json-server.typicode.com/linrufeng/demo/posts"
              >
                <img width='100%' src={bImage} alt="" srcset="" />
              </Uploader>
            </Form.Item>
          </div>
          <Form.Item required label="姓名" name="username">
            <Input readOnly type="text" placeholder="" />
          </Form.Item>
          <Form.Item required label="身份证号" name="idCard">
            <Input readOnly type="text" placeholder="" />
          </Form.Item>
        </div>
        <div className={styles.card}>
          <div>银行卡信息</div>
          <Form.Item required label="卡号" name="bankCard">
            <Input readOnly type="text" placeholder="" />
          </Form.Item>
          <Form.Item required label="开户行" name="bankName">
            <Input readOnly type="text" placeholder="" />
          </Form.Item>
          <Form.Item required label="手机号" name="phone">
            <Input readOnly type="text" placeholder="" />
          </Form.Item>
        </div>
        <div className={styles.card}>
          <div>本人认证</div>
          <Form.Item required label="点击开始认证" name="hasCredit">
            <Input readOnly type="text" placeholder="" />
          </Form.Item>
        </div>
        <div className={styles.card}>
          <Form.Item required label="" name="hasAgree">
            <Checkbox
              style={{
                "--nut-icon-width": "24px",
                "--nut-icon-height": "24px",
              }}
              label={
                <div>
                  我同意
                  <span style={{ color: "#2e70f2" }}>
                    《人脸核身个人信息处理授权协议》
                  </span>
                  并授权使用我提交的个人信息用于身份信息核验等用途
                </div>
              }
            />
          </Form.Item>
        </div>
      </Form>
    </div>
  );
}

export default Index;
